<template>
  <div class="lt-container">
    <div class="box-header">风险预警</div>
    <div class="box-content">
      <div class="bc-top">
        <div class="bct-item" v-for="(item, index) in riskList" :key="index">
          <span class="text-value">{{ item.value }}</span>
          <span class="text-label">{{ item.label }}</span>
        </div>
      </div>
      <div class="bc-center">
        <div id="bcc-chart1" class="bcc-chart"></div>
        <div id="bcc-chart2" class="bcc-chart"></div>
      </div>
      <div class="bc-bottom">
        <img class="result-icon" src="@/assets/images/result-icon.png" />
        <div class="result-text">
          本月共106条风险预警，其中准确预警94条，误报12条，高风险区域占比20%，中风险区域占比30%，低风险区域占比50%，风险指数前四为青白江，双流区，简阳市，温江区
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { pieChart } from '@/utils/charts.js'
import { onMounted } from 'vue'
const riskList = [
  {
    label: '青白江',
    value: '4.5'
  },
  {
    label: '双流区',
    value: '4.0'
  },
  {
    label: '简阳市',
    value: '3.4'
  },
  {
    label: '温江区',
    value: '3.2'
  }
]
onMounted(() => {
  pieChart('bcc-chart1', { legend: 'left', size: '60%', center: '65%' })
  pieChart('bcc-chart2', { legend: 'right', size: '45%', center: '45%' })
})
</script>
<style scoped lang="scss">
.lt-container {
  width: vw(490);
  height: vh(490);
  position: absolute;
  top: vh(80);
  left: vw(10);
  z-index: 2;
  background: url('@/assets/images/partboxbg.png');
  background-size: 100% 100%;
  color: #fff;
}
.box-header {
  height: vh(40);
  text-indent: vw(40);
  letter-spacing: 1ch;
  font-size: vw(19);
  font-weight: 600;
  line-height: vh(40);
}
.box-content {
  height: vh(450);
  padding: vh(10);
}
.bc-top {
  height: vh(80);
  margin-top: vh(10);
  display: flex;
  justify-content: space-between;
  .bct-item {
    width: vw(84);
    height: vh(67);
    background: url('@/assets/images/databoxbg.png');
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    .text-value {
      font-size: vw(18);
      font-weight: 600;
      padding: 0;
    }
    .text-label {
      font-size: vw(13);
    }
  }
}
.bc-center {
  height: vh(192);
  margin: vh(9) 0;
  padding: 0 10px;
  background: url('@/assets/images/areaboxbg.png');
  background-size: 100% 100%;
  display: flex;
  .bcc-chart {
    width: 50%;
    height: 100%;
  }
}
.bc-bottom {
  height: vh(130);
  background: url('@/assets/images/areaboxbg.png');
  background-size: 100% 100%;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 0 20px;
  .result-icon {
    width: 40px;
  }
  .result-text {
    flex: 1;
  }
}
</style>
